<template>
  <div class="login-main">
    <h2>小米帐号登录</h2>
    <van-form @submit="onSubmit">
      <van-field
        v-model="username"
        name="username"
        placeholder="邮箱/手机号码/小米ID"
        :rules="[{ pattern, required: true, message: '请填写正确的用户名!' }]"
      />
      <van-field
        v-model="password"
        type="password"
        name="password"
        placeholder="请输入密码"
        :rules="[{ pattern: pass, required: true, message: '密码格式不正确' }]"
      />
      <van-field name="checkbox">
        <template #input>
          <van-checkbox
            v-model="checkbox"
            shape="square"
          />已阅读并同意小米帐号用户协议和隐私政策
        </template>
      </van-field>
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
      </div>
    </van-form>
    <router-link to="/register" class="reg">注册帐号</router-link>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "loginMain",
  data() {
    return {
      checkbox: false,
      username: "",
      password: "",
      pass: /^.{6,}$/,
      pattern: /^1\d{10}$/,
    };
  },
  components: {
    // [Notify.Component.name]: Notify.Component,
  },
  methods: {
    onSubmit(values) {
      if (this.checkbox == false) {
        this.$notify({
          type: "warning",
          message: "请同意小米帐号用户协议和隐私政策",
        });
        // Notify({ type: 'warning', message: '请同意小米帐号用户协议和隐私政策' });
        return;
      }
      // console.log("submit", values);
      axios({
        url: "/user/",
        method: "get",
        params: { username: values.username, password: values.password },
      }).then((res) => {
        console.log(res.data);
        if (res.data.length > 0) {
          this.$notify({
            type: "success",
            message: "登录成功!",
          });
          localStorage.setItem(
            "user",
            this.username
          );
          this.$router.push("/my");
        } else {
          this.$notify({
            type: "danger",
            message: "用户名或密码错误!!!",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.reg {
  text-align: center;
}
.login-main {
  padding: 0rem 0.2rem;
}
.login-main h2 {
  padding-left: 0.15rem;
  font-size: 0.23rem;
  margin-bottom: 0.1rem;
}
</style>
<style>
.van-checkbox__icon--square .van-icon-success {
  border-radius: 50%;
  margin-right: 0.15rem;
  /* background-color: rgb(240, 240, 240); */
}
.van-field {
  margin-bottom: 0.2rem;
}
.van-field input {
  height: 0.6rem;
  font-size: 0.2rem;
  font-weight: 500;
}
.van-field__error-message {
  font-size: 0.18rem;
}
</style>